<template>
  <div class="cate-params">
    <!-- 面包屑 -->
    <el-row>
      <my-breadcrumb level1="商品管理" level2="分类参数"></my-breadcrumb>
    </el-row>
    <!-- 提示文字 -->
    <el-row>
      <el-alert
        type="warning"
        title="只允许为第三级分类设置参数"
        show-icon
        :closable="false"
      ></el-alert>
    </el-row>
    <el-row>
      <!--级联选择器的使用  -->
      <el-cascader
        :options="categoryData"
        :props="cascaderProps"
        v-model="cascaderSelected"
        @change="handleCategoryChange"
        clearable
        :show-all-levels="false"
      ></el-cascader>
    </el-row>
    <el-row>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="动态参数" name="many">
          <el-row>
            <el-button type="danger">设置动态参数</el-button>
          </el-row>
          <el-row>
            <el-table :data="attrsManyData" style="width: 100%">
              <el-table-column type="expand" label="#">
                <template slot-scope="scope">
                  <!-- {{ scope.row }} -->
                  <el-tag
                    closable
                    v-for="item in scope.row.attr_vals"
                    :key="item"
                    @close="handleClose(item, scope.row)"
                    >{{ item }}</el-tag
                  >
                  <el-input
                    class="input-new-tag"
                    v-if="inputVisible"
                    v-model="inputValue"
                    ref="saveTagInput"
                    size="small"
                    @keyup.enter.native="handleInputConfirm(scope.row)"
                    @blur="handleInputConfirm(scope.row)"
                  >
                  </el-input>
                  <el-button
                    v-else
                    class="button-new-tag"
                    size="small"
                    @click="showInput"
                    >+ New Tag</el-button
                  >
                </template>
              </el-table-column>
              <el-table-column prop="attr_name" label="属性名称">
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-row>
                    <el-tooltip effect="dark" content="编辑" placement="top">
                      <el-button
                        type="primary"
                        icon="el-icon-edit"
                        circle
                        plain
                        size="mini"
                        @click="handleEditGoods(scope.row)"
                      ></el-button>
                    </el-tooltip>
                    <el-tooltip effect="dark" content="删除" placement="top">
                      <el-button
                        type="danger"
                        icon="el-icon-delete"
                        circle
                        plain
                        size="mini"
                        @click="handleDeleteGoods(scope.row)"
                      ></el-button>
                    </el-tooltip>
                  </el-row>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="静态属性" name="only">
          <el-row>
            <el-button type="danger">设置静态参数</el-button>
          </el-row>
          <el-row>
            <el-table :data="attrsOnlyData" style="width: 100%">
              <el-table-column type="index" label="#"> </el-table-column>
              <el-table-column prop="attr_name" label="属性名称">
              </el-table-column>
              <el-table-column prop="attr_vals" label="属性值">
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-row>
                    <el-tooltip effect="dark" content="编辑" placement="top">
                      <el-button
                        type="primary"
                        icon="el-icon-edit"
                        circle
                        plain
                        size="mini"
                        @click="handleEditGoods(scope.row)"
                      ></el-button>
                    </el-tooltip>
                    <el-tooltip effect="dark" content="删除" placement="top">
                      <el-button
                        type="danger"
                        icon="el-icon-delete"
                        circle
                        plain
                        size="mini"
                        @click="handleDeleteGoods(scope.row)"
                      ></el-button>
                    </el-tooltip>
                  </el-row>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-row>
  </div>
</template>

<script>
import MyBreadcrumb from '@/components/MyBreadcrumb'
export default {
  components: {
    MyBreadcrumb,
  },
  data() {
    return {
      categoryData: [],
      cascaderProps: {
        value: 'cat_id',
        label: 'cat_name',
      },
      cascaderSelected: [],
      activeName: 'many',
      attrsManyData: [],
      attrsOnlyData: [],
      inputVisible: false,
      inputValue: '',
      dynamicTags: [],
    }
  },
  created() {
    this.getCategoryData()
  },
  methods: {
    // 获取分类列表
    async getCategoryData() {
      const { data } = await this.$http.get('/categories')

      if (data.meta.status === 200) {
        this.categoryData = data.data
      } else {
        this.$message.warning(data.meta.msg)
      }
    },
    handleCategoryChange(options) {
      // console.log(options)
    },
    // 获取动态参数数据
    async getManyAttrsListData() {
      const { data } = await this.$http.get(
        `/categories/${this.cascaderSelected[2]}/attributes?sel=many`
      )
      if (data.meta.status === 200) {
        this.attrsManyData = data.data

        this.attrsManyData.forEach((item) => {
          item.attr_vals =
            // item.attr_vals.length !== 0 ? item.attr_vals.trim().split(',') : []
            item.attr_vals.length !== 0 ? item.attr_vals.trim().split(',') : []
        })
        console.log(this.attrsManyData)
      } else {
        this.$message.warning(data.meta.msg)
      }
    },
    // 获取静态参数数据
    async getOnlyAttrsListData() {
      const { data } = await this.$http.get(
        `/categories/${this.cascaderSelected[2]}/attributes?sel=only`
      )
      if (data.meta.status === 200) {
        this.attrsOnlyData = data.data

        console.log(this.attrsOnlyData)
      } else {
        this.$message.warning(data.meta.msg)
      }
    },
    // tabs 切换
    handleClick() {
      if (this.activeName === 'many' && this.cascaderSelected.length === 3) {
        this.getManyAttrsListData()
      }
      if (this.activeName === 'only' && this.cascaderSelected.length === 3) {
        this.getOnlyAttrsListData()
      }
    },
    // el-tab 关闭
    handleClose(tagValue, scope_row) {
      scope_row.attr_vals.splice(scope_row.attr_vals.indexOf(tagValue), 1)
      // 提交 tag 修改
      this.submitEditAttrs(scope_row)
    },
    // el-tab 新增输入框
    showInput() {
      this.inputVisible = true
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    // el-tab 新增输入框 输入完成
    handleInputConfirm(scope_row) {
      let inputValue = this.inputValue
      if (inputValue) {
        scope_row.attr_vals.push(inputValue)
      }
      this.inputVisible = false
      this.inputValue = ''

      // 提交 tag 修改
      this.submitEditAttrs(scope_row)
    },
    // 提交 el-tag 编辑结果
    async submitEditAttrs(scope_row) {
      // 准备数据
      const formData = {
        attr_name: scope_row.attr_name,
        attr_sel: 'many',
        attr_vals: scope_row.attr_vals.join(','),
      }

      const { data } = await this.$http.put(
        `/categories/${this.cascaderSelected[2]}/attributes/${scope_row.attr_id}`,
        formData
      )
      if (data.meta.status === 200) {
        this.$message.success(data.meta.msg)
      } else {
        this.$message.warning(data.meta.msg)
      }
    },
  },
}
</script>

<style lang="less" scoped>
.cate-params {
  .el-row {
    padding: 5px 0;
    .el-tag + .el-tag {
      margin-left: 10px;
      margin-bottom: 10px;
    }
    .button-new-tag {
      margin-left: 10px;
      height: 32px;
      line-height: 30px;
      padding-top: 0;
      padding-bottom: 0;
    }
    .input-new-tag {
      width: 90px;
      margin-left: 10px;
      vertical-align: bottom;
    }
  }
}
</style>
